<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />		
		<meta name="author" content="朱三元" />
		<meta name="last-edit" content="2021.1.20" />
		<title>纯css二级导航下拉菜单</title>
		<meta name="keyword" content="关键字">
		<meta name="description" content="描述">
		<style type="text/css">
			* {/* 清除各种标签的默认margin、padding，主要是ul li*/
				margin: 0; 
				padding: 0;
			}
			#nav_container {
				background-color: red; /*导航条背景区域为红色*/
				min-height: 35px;
				/*position:relative; 设置为相对定位，其子元素nav才能设置绝对定位。也可以不设此属性，在不设的情况下，子元素nav不能设置top属性*/
			}
			nav {
				min-height: 35px;
				width: 795px;
				margin: 0 auto;
				position: absolute; /*必须设为绝对定位，后面的网页内容才能正常显示。注意：不能设置top属性*/
			}
			nav ul{
				background-color:lightblue;  /* 二级菜单项浅蓝色背景*/
			}
			nav > ul >li {
				float: left;  /* 一级菜单项向左浮动*/
			}
			nav ul li {
				list-style-type: none;
				border:solid thin #dddddd;
			}			
			nav ul li:hover{
				background-color: lightskyblue;  /*当光标位于一级菜单上时背景变为天蓝色*/
			}
			nav ul li a {
				text-decoration: none;
				display: block;
				width: 130px;
				line-height: 35px;
				text-align: center;
				color: white;    /*一级菜单字体默认为白色*/
				font-family: 微软雅黑;
			}
			nav ul li:hover a{
				color: black;  /*当光标位于一级菜单上时字体黑色*/
			}
			nav ul li ul li:hover {
				background-color: lightskyblue; /*当光标位于二级菜单上时背景变为天蓝色*/
			}
			nav ul li ul li a {
				color: black   /*二级菜单项上的超链接文字默认为黑色*/
			}
			nav ul li ul li:hover a{
				color: red; /*当光标在二级菜单项上时，超链接文字变红*/
			}			
			nav ul li ul {
				display: none; /*二级菜单项隐藏*/
			}
			nav ul li:hover ul {
				display: block; /*当光标在一级菜单项上时，二级菜单项显示*/
			}
			#content{				
			}
		</style>
	</head>
	<body>
		<div id="nav_container">
			<nav>
				<ul>
					<li><a href="#">一级导航1</a>
						<ul>
							<li><a href="#">二级导航1.1</a></li>
							<li><a href="#">二级导航1.2</a></li>
							<li><a href="#">二级导航1.3</a></li>
							<li><a href="#">二级导航1.4</a></li>
						</ul>
					</li>
					<li><a href="#">一级导航2</a>
						<ul>
							<li><a href="#">二级导航2.1</a></li>
							<li><a href="#">二级导航2.2</a></li>
							<li><a href="#">二级导航2.2</a></li>
						</ul>
					</li>
					<li><a href="#">一级导航3</a>
						<ul>
							<li><a href="#">二级导航3.1</a></li>
							<li><a href="#">二级导航3.2</a></li>
							<li><a href="#">二级导航3.3</a></li>
							<li><a href="#">二级导航3.4</a></li>
						</ul>
					</li>
					<li><a href="#">一级导航4</a>
						<ul>
							<li><a href="#">二级导航</a></li>
							<li><a href="#">二级导航</a></li>
							<li><a href="#">二级导航</a></li>
						</ul>
					</li>
					<li><a href="#">一级导航5</a>
						<ul>
							<li><a href="#">二级导航5.1</a></li>
							<li><a href="#">二级导航5.2</a></li>
							<li><a href="#">二级导航5.3</a></li>
							<li><a href="#">二级导航5.4</a></li>
							<li><a href="#">二级导航5.5</a></li>
						</ul>
					</li>
					<li><a href="#">一级导航6</a>
						<ul>
							<li><a href="#">二级导航6.1</a></li>
							<li><a href="#">二级导航6.2</a></li>
							<li><a href="#">二级导航6.3</a></li>
							<li><a href="#">二级导航6.4</a></li>
						</ul>
					</li>
				</ul>
			</nav>
		</div>
		<div id="content">
			这是网页的内容。这是网页的内容。这是网页的内容。是网页的内容。这是网页的内容。这是网页的内容。这是网页的内容。这是网页的内容。这是网页的内容。这是网页的内容。这是网页的内容。页的内容。这是网页的内容。这是网页的内容。这是网页的内容。这是网页的内容。这是网页的内容。这是网页的内容。这是网页的内容。这是网页的内容。这是网页的内容。
		</div>
	</body>
</html>
